<template>
  <div class="container">
    <!-- 左侧已选条目区域 -->
    <div class="left-section">
      <h3 class="selected-title">已选条目 ({{ selectedItems.length }})</h3>
      <div class="indicator-list">
        <!-- 条目列表过渡动画 -->
        <transition-group name="list" tag="div">
          <div
            v-for="(item, index) in selectedItems"
            :key="item.id"
            class="indicator-item"
            @contextmenu.prevent="handleContextMenu($event, item)"
          >
            <div class="indicator-card">
              <!-- 类型标识 -->
              <div class="type-indicator" :class="item.type" />

              <!-- 主要内容 -->
              <div class="content-wrapper">
                <div class="meta-info">
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-type">{{ typeLabels[item.type] }}</span>
                </div>
              </div>

              <!-- 删除按钮 -->
              <div class="delete-wrapper" @click="removeIndicator(index)">
                <el-icon class="delete-icon">
                  <Delete />
                </el-icon>
                <span class="delete-text">移除</span>
              </div>
            </div>
          </div>
        </transition-group>
      </div>

      <!-- 子维度配置对话框 -->
      <el-dialog v-model="dialogVisible" :title="`${currentItem?.name} - 子维度配置`" width="600px">
        <div class="dimension-config">
          <div v-for="(dimension, idx) in currentDimensions" :key="idx" class="dimension-row">
            <el-checkbox v-model="dimension.checked" style="margin-right: 16px" />
            <span class="dimension-title">{{ dimension.name }}</span>
            <el-select
              v-model="dimension.selectedValue"
              :disabled="!dimension.checked"
              placeholder="请选择"
              style="width: 200px; margin-left: auto"
            >
              <el-option
                v-for="opt in dimension.options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </el-select>
          </div>
        </div>

        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDimensionConfig">保存</el-button>
        </template>
      </el-dialog>
    </div>

    <!-- 右侧配置区域 -->
    <div class="right-section">
      <!-- 维度配置 -->
      <div class="dimension-section">
        <h3>维度配置</h3>
        <div v-for="(dimension, dimIndex) in dimensions" :key="dimIndex" class="dimension-row">
          <el-checkbox v-model="dimension.checked">{{ dimension.title }}</el-checkbox>
          <div class="dimension-items">
            <el-checkbox
              v-for="(item, itemIndex) in dimension.items"
              :key="itemIndex"
              :label="item"
            />
          </div>
        </div>
      </div>

      <!-- 下拉选择区 -->
      <div class="select-section">
        <div class="select-row">
          <el-checkbox v-model="select1Enabled">选项1</el-checkbox>
          <el-select v-model="select1Value" :disabled="!select1Enabled" placeholder="请选择">
            <el-option
              v-for="item in selectOptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="select-row">
          <el-checkbox v-model="select2Enabled">选项2</el-checkbox>
          <el-select v-model="select2Value" :disabled="!select2Enabled" placeholder="请选择">
            <el-option
              v-for="item in selectOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="action-buttons">
        <el-button @click="handleCancel">取消新增</el-button>
        <el-button type="primary">保存配置</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Delete } from "@element-plus/icons-vue";
import { ref, defineProps, defineEmits } from "vue";

// 响应式数据
const dialogVisible = ref(false); // 子维度配置对话框显隐状态
const currentItem = ref(null); // 当前操作的条目
const currentDimensions = ref([]); // 当前条目的子维度配置

// 模拟子维度数据
const mockDimensions = [
  {
    name: "时间维度",
    options: [
      { value: "daily", label: "按日" },
      { value: "weekly", label: "按周" },
      { value: "monthly", label: "按月" },
    ],
  },
  {
    name: "地域维度",
    options: [
      { value: "province", label: "省份" },
      { value: "city", label: "城市" },
      { value: "district", label: "区县" },
    ],
  },
  {
    name: "用户维度",
    options: [
      { value: "age", label: "年龄" },
      { value: "gender", label: "性别" },
      { value: "vip", label: "VIP等级" },
    ],
  },
];

// 条目类型标签
const typeLabels = {
  metric: "指标",
  table: "数据表",
};

// 处理右键菜单
const handleContextMenu = (event, item) => {
  currentItem.value = item;

  // 初始化子维度配置
  currentDimensions.value = mockDimensions.map((d) => ({
    ...d,
    checked: item.subDimensions?.[d.name]?.checked || false,
    selectedValue: item.subDimensions?.[d.name]?.selectedValue || "",
  }));

  dialogVisible.value = true;
};

// 保存子维度配置
const saveDimensionConfig = () => {
  const subDimensions = {};
  currentDimensions.value.forEach((d) => {
    subDimensions[d.name] = {
      checked: d.checked,
      selectedValue: d.selectedValue,
    };
  });

  // 触发事件更新父组件数据
  emit("update-subdimensions", {
    itemId: currentItem.value.id,
    subDimensions,
  });

  dialogVisible.value = false;
};

// 移除条目
const removeIndicator = (index) => {
  const item = props.selectedItems[index];
  emit("remove-item", item.id);
};

// 取消操作
const handleCancel = () => {
  emit("cancel");
};

// 父组件传递的已选条目
// const props = defineProps({
//   selectedItems: {
//     type: Array,
//     default: () => [
//       { id: "metric1", name: "用户活跃度", type: "metric" },
//       { id: "table1", name: "用户行为表", type: "table" },
//     ],
//   },
// });

// 定义事件
const emit = defineEmits(["remove-item", "cancel", "update-subdimensions"]);

// 维度数据
const dimensions = ref([
  {
    title: "第一维度",
    checked: false,
    items: ["维度1-1", "维度1-2", "维度1-3"],
  },
  {
    title: "第二维度",
    checked: false,
    items: ["维度2-1", "维度2-2", "维度2-3"],
  },
  {
    title: "第三维度",
    checked: false,
    items: ["维度3-1", "维度3-2", "维度3-3"],
  },
]);

// 下拉选择数据
const select1Enabled = ref(false);
const select2Enabled = ref(false);
const select1Value = ref("");
const select2Value = ref("");
const selectOptions1 = ref([
  { value: "1", label: "选项1-1" },
  { value: "2", label: "选项1-2" },
]);
const selectOptions2 = ref([
  { value: "A", label: "选项2-A" },
  { value: "B", label: "选项2-B" },
]);
</script>

<style scoped lang="scss">
.container {
  display: flex;
  height: 100vh;
  padding: 20px;
}

.left-section {
  width: 30%;
  padding-right: 20px;
  border-right: 1px solid #eee;
}

.right-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 70%;
  padding-left: 20px;
}

.selected-title {
  padding-bottom: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #eee;
}

.indicator-list {
  height: calc(100vh - 160px);
  padding-right: 8px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
}

.indicator-item {
  margin-bottom: 10px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateX(5px);
  }
}

.indicator-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

    .delete-wrapper {
      opacity: 1;
    }
  }
}

.type-indicator {
  width: 4px;
  height: 24px;
  margin-right: 12px;
  border-radius: 2px;

  &.metric {
    background: linear-gradient(135deg, #7c8ff7, #5a72eb);
  }

  &.table {
    background: linear-gradient(135deg, #66d8af, #48c997);
  }
}

.content-wrapper {
  flex: 1;
  min-width: 0;
}

.meta-info {
  display: flex;
  align-items: baseline;

  .item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
  }

  .item-type {
    flex-shrink: 0;
    margin-left: 8px;
    font-size: 12px;
    color: #999;
  }
}

.delete-wrapper {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 4px 8px;
  margin-left: 12px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.2s;

  &:hover {
    background: #fef0f0;

    .delete-icon {
      color: #f56c6c;
    }

    .delete-text {
      color: #f56c6c;
    }
  }
}

.delete-icon {
  margin-right: 4px;
  font-size: 14px;
  color: #999;
  transition: inherit;
}

.delete-text {
  font-size: 12px;
  color: #999;
  transition: inherit;
}

/* 列表过渡动画 */
.list-enter-active,
.list-leave-active {
  transition: all 0.4s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.dimension-config {
  padding: 0 20px;
}

.dimension-row {
  display: flex;
  align-items: center;
  padding: 12px;
  margin: 16px 0;
  background: #f8f9fa;
  border-radius: 4px;
}

.dimension-title {
  margin-right: 16px;
  font-size: 14px;
  color: #606266;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid #eee;

  .el-button {
    min-width: 100px;
  }
}
</style>
